<template>
  <div class="item-content">
    <div class="item-inner">
      <div class="item-title">{{title}}：</div>
      <div class="item-content">
        <div class="starts">
          <template v-for="item in 5">
            <i class="glyphicon glyphicon-star" :class="{on:item<=rate}" @click="update(item)" :key="item"></i>
          </template>
          <span v-if="rate>0">({{info}})</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: ['value', 'title'],
  data() {
    return {
      rate: 0
    }
  },
  computed: {
    info() {
      let text = '差'
      switch (this.rate) {
        case 2:
          text = '好'
          break
        case 3:
          text = '好'
          break
        case 4:
          text = '很好'
          break
        case 5:
          text = '非常好'
          break
      }
      return text
    }
  },
  methods: {
    update(rate) {
      this.rate = rate
      this.$emit('input', rate)
    }
  },
  created() {
    this.rate = this.val
  }
}
</script>
